<template>
    <div>
        <dialog-alert :data="alertData" @on-close="onCloseAlert()" @on-confirm="submitForm(ruleFormRef)">
            <div class="dialog-alert">
                <el-form ref="ruleFormRef" :model="createPoemsListData" :rules="rules" label-width="120px" class="demo-ruleForm"
                    :status-icon="false">
                    <el-form-item label="诗单名称：" prop="pl_name">
                        <el-col :span="12">
                            <el-input v-model="createPoemsListData.pl_name"/>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="诗单简介：">
                        <el-col :span="12">
                            <!-- <el-input v-model="createPoemsListData.pl_synopsis"/> -->
                            <textarea v-model="createPoemsListData.pl_synopsis" cols="80" rows="3"></textarea>
                        </el-col>
                    </el-form-item>
                    <div v-if="type == 'change'" style="padding-left: 2.5rem;">是否更新诗单封面？（如不更新请关闭此选项）
                        <el-switch v-model="isChangeCover"/>
                    </div>
                    <el-form-item label=" " v-if="type == 'change' && isChangeCover">
                        <upload-alert :type="type" ref="uploadAlertRef" @alertTip="alertTip"></upload-alert>
                    </el-form-item>
                    <el-form-item label="诗单封面：" v-if="type == 'create'">
                        <upload-alert :type="type" ref="uploadAlertRef" @alertTip="alertTip"></upload-alert>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-alert>
    </div>
    <dialog-alert v-if="isShowAlert == 'success' || isShowAlert == 'changeSuccess'" :data="createSuccessData" @on-confirm="onConfirm"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'failure' || isShowAlert == 'changeFailure'" :data="createFailureData" @on-confirm="onConfirm"></dialog-alert>
</template>

<script setup lang="ts">
import { clearObject } from "@/utils/util"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { computed, onMounted, reactive, ref, toRefs } from "vue"
import managePoemsListStore from "../../../manage-poemsList/manage-poemsList.store"
import overallStore from "@/store"

const overallSe = overallStore()
const managePoemsListSe = managePoemsListStore()

const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    data: {
        type: Object,
        default: {}
    }
})

const { type, data } = toRefs(props)
const initData = () => {
    if(type.value == 'change') {
        createPoemsListData.pl_id = data.value.pl_id
        createPoemsListData.pl_name = data.value.pl_name
        createPoemsListData.pl_synopsis = data.value.pl_synopsis
    }
}

const createPoemsListData = reactive({
    pl_id: '',
    pl_name: '',
    pl_synopsis: ''
})
// 校验规则
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    pl_name: [{ 
        required: true, 
        message: '请输入诗单名称', 
        trigger: ['change', 'blur'] 
    }]
})
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            createPoemsList()
        }
    })
}
// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    Object.assign(createPoemsListData, clearObject(createPoemsListData))
}

const emits = defineEmits(['closeCreatePoemsListlAlert'])
// 添加诗歌信息
const alertData = {
    title: type.value == 'change' ? '更改诗单信息' : '创建诗单',
    confirmTitle: type.value == 'change' ? '更改' : '创建',
    isShowCancleBtn: true,
    cancleTitle: '取消',
    isShowClose: true,
    size: 'large'
}
// 点击取消/关闭
const onCloseAlert = () => {
    emits('closeCreatePoemsListlAlert')
}
// 点击创建
let uploadAlertRef = ref<any>(null)
const createPoemsList = () => {
    if(type.value == 'change') {
        const data = {
            poemsName: createPoemsListData.pl_name, 
            synopsis: createPoemsListData.pl_synopsis ? createPoemsListData.pl_synopsis : '无', 
            isPrivate: false, 
            poemsId: createPoemsListData.pl_id,
            type: 'cover/poems-list',
        }
        if(!isChangeCover.value) {
            managePoemsListSe.getEditPoemsListInfo(data).then((res: any) => {
                if(res.status == 'success') {
                    isShowAlert.value = 'success'
                } else {
                    isShowAlert.value = 'failure'
                }
            })
        } else {
            window.sessionStorage.setItem('uploadApi', '/api/poemsList/editPoemsListInfo')
            uploadAlertRef.value?.handleDownload(data)
        }
    } else {
        const data = {
            pl_name: createPoemsListData.pl_name, 
            pl_synopsis: createPoemsListData.pl_synopsis ? createPoemsListData.pl_synopsis : '无', 
            make_private: 0,
            pl_type: 'A',
            type: 'cover/poems-list',
        }
        window.sessionStorage.setItem('uploadApi', '/api/poemsList/createPoemsList')
        uploadAlertRef.value?.handleDownload(data)
    }
}

// 更新诗单信息
let isChangeCover = ref<boolean>(false)


// 点击添加或更改按钮的提示弹窗逻辑
let isShowAlert = ref<string>('')
// 弹窗显示
const alertTip = (value: string) => {
    isShowAlert.value = value
}
// 创建诗单成功
const createSuccessData = {
    title: type.value == 'change' ? '更新诗单成功' : '创建诗单成功',
    message: type.value == 'change' ? '更新诗单成功' : '创建诗单成功！',
    confirmTitle: '确认',
    isShowClose: false,
}
// 创建诗单失败
const createFailureData = {
    title: type.value == 'change' ? '更新诗单失败' : '创建诗单失败',
    message:  type.value == 'change' ? '更新诗单失败' : '创建诗单失败！',
    confirmTitle: '确认',
    isShowClose: false,
}
// 点击确认
const onConfirm = () => {
    let status = isShowAlert.value
    isShowAlert.value = ''
    if(status == 'success' || status == 'changeSuccess') {
        onCloseAlert()
    }
}

onMounted(() => {
    initData()
})
</script>

<style lang="less" scoped>

</style>